<template>
  <div>
<!--    <h3 class="login-title">首页</h3>-->
    <router-view />
    <van-tabbar v-model="active" route  @change="onChange">
      <van-tabbar-item  replace to="/news" name="消息" icon="home-o">消息</van-tabbar-item>
      <van-tabbar-item  replace to="/work"  name="工作" icon="location-o">工作</van-tabbar-item>
      <van-tabbar-item to="/personalCenter" name="个人中心" icon="manager-o">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
  import {Notify } from 'vant'

  export default {
 /*   components: {
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [Notify .name]: Notify ,
      [Button.name]: Button,

    },*/
    data() {
      return {
        active: "工作",
        userInfoId:'',
      }
    },
    computed: {
      userInfo () {
        //return that.$store.state.userInfo
        return this.$store.getters.userInfo;
      }
    },
    watch: {

      //养老金基数
      userInfo(val) {
        console.log("监听用户");
        console.log(val);
        this.userInfoId = val;
      },
    },
    methods:{

      //监听导航栏切换
      onChange(index) {
        Notify({ type: 'primary', message: index });
      }
    }
  }
</script>
<style scoped>
  .photo {
    text-align: center;
    width: 95%;
    height: 200px;
    background: linear-gradient(135deg, rgba(72, 175, 255, 1) 0%, rgba(56, 140, 255, 1) 100%);
    border-radius: 10px;
    margin-left: 10px;
  }

  .login-title {
    text-align: center;
    margin-top: 20px;
  }

  .home-container {
    width: 375px;
    height: 2110px;
    background: #EEEEEE;
  }

  .color-lump {
    width: 6px;
    height: 20px;
    border-radius: 3px;
    background: rgba(56, 140, 255, 1);
    margin-top: 1px;
    margin-left: 10px;
  }

  .task {
    font-size: 18px;
    margin-left: 20px;

  }

  .load {
    font-size: 13px;
    text-align: right;
    color: darkgray;
    float: right;
  }

  .send {
    width: 170px;
    height: 70px;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    margin-left: 10px;
    float: left;
    margin-top: 10px;
  }

  .pai {
    background: rgba(56, 159, 255, 1);
    border-radius: 10px;
    font-size: 35px;
    color: #EEEEEE;
    line-height: 50px;
    margin: 15px;
  }

  .number {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(102, 102, 102, 1);
    padding: 25px;
  }

  .assign {
    font-size: 20px;
    font-family: PingFang SC;
    color: rgba(102, 102, 102, 1);
    line-height: 1px;
    margin-left: 50px;
    padding-left: 20px;
  }

  .icon1 {
    font-size: 35px;
    color: #EEEEEE;
    line-height: 50px;
    margin: 15px;
    width: 90px;
    height: 90px;
    background: rgba(0, 203, 115, 1);
    border-radius: 10px;

  }


</style>
